<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>one</title>
</head>
<body>
  <div>one</div>
  <button id="one-btn">broadcast msg</button>
  <div class="receiveMsg">等待接收...</div>

  <script>
    const msg = {
      name:'one',
    }
    const opener = window.opener //打开one的窗口
    if(opener){
      opener.postMessage(msg,'http://127.0.0.1:5500')
    }
    window.addEventListener('message', (e) => {
      console.log('one get!', e.data, e.origin, e.source.name)
    })
    /**
     *  BroadcastChannel
     * */
    const channel = new BroadcastChannel('mychannel')
    const oneBtn = document.querySelector("#one-btn")
    oneBtn.addEventListener('click', () => {
      channel.postMessage('one said something using channel')
      channel.close()
    })
    channel.onmessage = (e) => {
      document.querySelector('.receiveMsg').innerHTML = e.data
    }
    /**
     * webStorage
     * */
    localStorage.setItem('onemsg','onePageLocalStorage')
    sessionStorage.setItem('one-only','onePageSessionStorage')
  </script>
</body>
</html>